<template>
	<view>
	<tn-nav-bar >我的收藏</tn-nav-bar>
	<view class="my_order" :style="{paddingTop: vuex_custom_bar_height+30+ 'px'}">
		
		<view class="guess-section">
			<!-- 顶部标签 -->
			<tn-tabs-swiper ref="tabs"  activeColor="#FF6708" inactiveColor="#080808" :list="list" :current="tabsIndex" :isScroll="false" @change="tabsChange"></tn-tabs-swiper>
			<swiper class="swiper__box"   :current="swiperIndex" style="margin-top: 12px;">
				<swiper-item class="swiper__item" v-for="(t,i) in list" :key="i">
					<scroll-view
					  class="list-scroll-content"
					  :scroll-y="true"
					  @scrolltolower="getMoreOrderList"
					>
					
					<view v-for="(item, index) in collectList" :key="index" class="guess-item" @click="navToDetailPage(item)">
						<view class="image-wrapper"><image :src="item.info.pic||item.info.avatar" mode="aspectFit"></image></view>
						<view class="cont">
							<text class="title clamp1">{{item.info.title||item.info.nickname}}</text>
							<text class="price">￥{{item.info.price}}</text>
						</view>
					</view>
					
					<view class="empty__item" v-if="collectList.length < 1 && !loading" style="margin-top: 200px;">
					  <tn-empty mode="favor"></tn-empty>
					</view>
					
					<view style="margin-top: 16px;">
						<tn-load-more v-if="collectList.length > 1"  :status="loadStatus" :fontSize="24" ></tn-load-more>
					</view>
					
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	<TemplateLoading :active="loading"></TemplateLoading>
	</view>
</template>

<script>
	import TemplateLoading from '../../components/loading.vue'
	import {collectList} from '@/api/user/index.js'
	export default {
		components:{TemplateLoading},
		data() {
			return {
				loading:false,
				list: [{
					name: '空间收藏',
					type:1
				  },
				  {
					name: '导师收藏',
					type:2,
				  },
				  {
					name: '活动收藏',
					type:3
				  }
				],
				loadStatus:"loadmore",
				tabsIndex: 0,
				swiperIndex: 0,
				collectList:[],
				total:0,
				selectParam:{
					type:1,
					page:1,
					size:8
				}
			}
		},
		onLoad() {
			this.initData();
		},
		
		methods: {
			// 标签栏值发生改变
			  tabsChange(index) {
				this.swiperIndex = index
				this.tabsIndex = index
				
				this.selectParam.type = this.list[index].type
				this.selectParam.page = 1
				this.total = 0
				this.collectList = []
				
				this.loading = true
				this.initData()
			  },
			  // swiper-item位置发生改变
			  swiperTransition(event) {
			  		this.$refs.tabs.setDx(event.detail.dx)
			  },
			  // swiper动画结束
			  swiperAnimationFinish(event) {
					const current = event.detail.current
					this.$refs.tabs.setFinishCurrent(current)
					if(this.swiperIndex != current){
						this.tabsChange(current)
					}
			  				
			  },
			  getMoreOrderList(){
				  if(this.loadStatus == "nomore" || this.collectList.length == 0 ) return;
				  
				  this.selectParam.page++
				  
				  this.loadStatus="loading"
				  this.initData()
			  },
			initData() {
				this.loading = true
				collectList(this.selectParam).then(res=>{
					 this.loading = false
					 this.collectList = [...this.collectList, ...res.data]
					 this.total = res.total
					 
					 if(res.data.length < this.selectParam.size || this.collectList.length == this.total){
						this.loadStatus = "nomore"
					 }else{
						this.loadStatus = "loadmore" 
					 }
				}, err=>{
					this.loading = false
				}) 
			},
			//详情页
			navToDetailPage(item) {
				
				var _t = 'activity';
				if(item.type ==1) _t = 'space';
				if(item.type ==2) _t = 'mentor';
		
				
				uni.navigateTo({
					url: `/pages/${_t}/detail?id=${item.to_id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.my_order{
		  background: $tn-main-bg;
		  height: 100vh;
		  padding-left: 6%;
		  padding-right: 6%;
	}
	
	.tn-radius10{border-radius: 10rpx;}
	.swiper__box,.list-scroll-content {
		//min-height: 500px;
		height: calc(100vh - (300rpx + env(safe-area-inset-bottom) / 2))
	}
	.guess-section{
		margin-top:25rpx;
		padding: 0 20rpx;
		.guess-item{
			background: #fff;
			border-radius:10rpx;
			overflow: hidden;
			display:flex;
			margin-bottom: 4%;
			padding: 20rpx;
			.image-wrapper{
				width:160rpx;
				height: 160rpx;
				image{
					width: 160rpx;
					height: 160rpx;
					opacity: 1;
				}
			}
			.title{
				font-size:30rpx;
				color: #333;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
			}
			.price{
				font-size:32rpx;
				color: $tn-main-orange;
				line-height: 1;
				padding: 0 20rpx;
				font-weight: bold;
				margin-top:10rpx;
				display: block;
			}
		}
	}
</style>
